[V0_FILE]json:file="package.json" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67", "ai": "5.0.41" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]css:file="app/globals.css" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); /* Simplified color palette to pure black and white with minimal grays */ :root { --background: oklch(1 0 0); /* Pure white */ --foreground: oklch(0 0 0); /* Pure black */ --card: oklch(1 0 0); /* Pure white */ --card-foreground: oklch(0 0 0); /* Pure black */ --popover: oklch(1 0 0); --popover-foreground: oklch(0 0 0); --primary: oklch(0 0 0); /* Pure black */ --primary-foreground: oklch(1 0 0); /* Pure white */ --secondary: oklch(0.97 0 0); /* Very light gray */ --secondary-foreground: oklch(0 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.4 0 0); /* Medium gray */ --accent: oklch(0.97 0 0); --accent-foreground: oklch(0 0 0); --destructive: oklch(0.5 0.2 0); /* Minimal red */ --destructive-foreground: oklch(1 0 0); --border: oklch(0.9 0 0); /* Light gray border */ --input: oklch(0.9 0 0); --ring: oklch(0 0 0); /* Black focus ring */ --chart-1: oklch(0.3 0 0); --chart-2: oklch(0.5 0 0); --chart-3: oklch(0.7 0 0); --chart-4: oklch(0.2 0 0); --chart-5: oklch(0.6 0 0); --radius: 0rem; /* Removed border radius for sharp, minimal look */ --sidebar: oklch(1 0 0); --sidebar-foreground: oklch(0 0 0); --sidebar-primary: oklch(0 0 0); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0 0 0); --sidebar-border: oklch(0.9 0 0); --sidebar-ring: oklch(0 0 0); } .dark { --background: oklch(0 0 0); /* Pure black */ --foreground: oklch(1 0 0); /* Pure white */ --card: oklch(0 0 0); --card-foreground: oklch(1 0 0); --popover: oklch(0 0 0); --popover-foreground: oklch(1 0 0); --primary: oklch(1 0 0); /* Pure white */ --primary-foreground: oklch(0 0 0); /* Pure black */ --secondary: oklch(0.1 0 0); /* Very dark gray */ --secondary-foreground: oklch(1 0 0); --muted: oklch(0.1 0 0); --muted-foreground: oklch(0.6 0 0); /* Medium gray */ --accent: oklch(0.1 0 0); --accent-foreground: oklch(1 0 0); --destructive: oklch(0.5 0.2 0); --destructive-foreground: oklch(1 0 0); --border: oklch(0.2 0 0); /* Dark gray border */ --input: oklch(0.2 0 0); --ring: oklch(1 0 0); /* White focus ring */ --chart-1: oklch(0.7 0 0); --chart-2: oklch(0.5 0 0); --chart-3: oklch(0.3 0 0); --chart-4: oklch(0.8 0 0); --chart-5: oklch(0.4 0 0); --sidebar: oklch(0 0 0); --sidebar-foreground: oklch(1 0 0); --sidebar-primary: oklch(1 0 0); --sidebar-primary-foreground: oklch(0 0 0); --sidebar-accent: oklch(0.1 0 0); --sidebar-accent-foreground: oklch(1 0 0); --sidebar-border: oklch(0.2 0 0); --sidebar-ring: oklch(1 0 0); } @theme inline { --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isQuickEdit="true" import type React from "react" import type { Metadata } from "next" import { GeistSans } from "geist/font/sans" import { GeistMono } from "geist/font/mono" import { Analytics } from "@vercel/analytics/next" import { Suspense } from "react" import "./globals.css" export const metadata: Metadata = { title: "AI Image Generator", description: "Minimalist AI image generation starter using Gemini 2.5 Flash", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( Loading...}>{children} ) } [V0_FILE]typescript:file="app/api/generate-image/route.ts" import { generateText } from "ai" import { type NextRequest, NextResponse } from "next/server" export async function POST(request: NextRequest) { const requestId = Math.random().toString(36).substring(7) try { console.log(`[v0] [${requestId}] Image generation request started:`, { method: request.method, url: request.url, timestamp: new Date().toISOString(), userAgent: request.headers.get("user-agent")?.substring(0, 100), }) const formData = await request.formData() const image1 = formData.get("image1") as File | null const image2 = formData.get("image2") as File | null const prompt = formData.get("prompt") as string console.log(`[v0] [${requestId}] Request data parsed:`, { hasImage1: !!image1, hasImage2: !!image2, hasPrompt: !!prompt, promptLength: prompt?.length || 0, promptPreview: prompt?.substring(0, 100) + (prompt?.length > 100 ? "..." : ""), image1Details: image1 ? { name: image1.name, size: `${(image1.size / 1024).toFixed(2)} KB`, type: image1.type, } : null, image2Details: image2 ? { name: image2.name, size: `${(image2.size / 1024).toFixed(2)} KB`, type: image2.type, } : null, timestamp: new Date().toISOString(), }) if (!prompt) { console.log(`[v0] [${requestId}] Validation failed: No prompt provided`) return NextResponse.json({ error: "Prompt is required" }, { status: 400 }) } const content: any[] = [ { type: "text", text: prompt, }, ] if (image1) { const image1Buffer = Buffer.from(await image1.arrayBuffer()) content.push({ type: "file", mediaType: image1.type, data: image1Buffer, }) console.log(`[v0] [${requestId}] Image1 processed:`, { originalSize: `${(image1.size / 1024).toFixed(2)} KB`, bufferSize: `${(image1Buffer.length / 1024).toFixed(2)} KB`, mediaType: image1.type, fileName: image1.name, }) } if (image2) { const image2Buffer = Buffer.from(await image2.arrayBuffer()) content.push({ type: "file", mediaType: image2.type, data: image2Buffer, }) console.log(`[v0] [${requestId}] Image2 processed:`, { originalSize: `${(image2.size / 1024).toFixed(2)} KB`, bufferSize: `${(image2Buffer.length / 1024).toFixed(2)} KB`, mediaType: image2.type, fileName: image2.name, }) } console.log(`[v0] [${requestId}] Calling AI model:`, { model: "google/gemini-2.5-flash-image-preview", contentItems: content.length, contentTypes: content.map((c) => c.type), responseModalities: ["TEXT", "IMAGE"], timestamp: new Date().toISOString(), }) const startTime = performance.now() // Generate image using Gemini 2.5 Flash Image const result = await generateText({ model: "google/gemini-2.5-flash-image-preview", providerOptions: { google: { responseModalities: ["TEXT", "IMAGE"] }, }, messages: [ { role: "user", content, }, ], }) const endTime = performance.now() console.log(`[v0] [${requestId}] AI model response:`, { responseTime: `${(endTime - startTime).toFixed(2)}ms`, hasText: !!result.text, textLength: result.text?.length || 0, textPreview: result.text?.substring(0, 100) + (result.text && result.text.length > 100 ? "..." : ""), hasFiles: !!result.files, filesCount: result.files?.length || 0, fileTypes: result.files?.map((f) => f.mediaType) || [], usage: { inputTokens: result.usage?.inputTokens || 0, outputTokens: result.usage?.outputTokens || 0, totalTokens: result.usage?.totalTokens || 0, }, timestamp: new Date().toISOString(), }) // Find the generated image in the result const imageFiles = result.files?.filter((f) => f.mediaType?.startsWith("image/")) console.log(`[v0] [${requestId}] Image processing:`, { totalFiles: result.files?.length || 0, imageFiles: imageFiles?.length || 0, imageDetails: imageFiles?.map((f) => ({ mediaType: f.mediaType, hasBase64: !!f.base64, base64Length: f.base64?.length || 0, sizeEstimate: f.base64 ? `${((f.base64.length * 0.75) / 1024).toFixed(2)} KB` : "unknown", })) || [], }) if (!imageFiles || imageFiles.length === 0) { console.log(`[v0] [${requestId}] Error: No image files in response:`, { totalFiles: result.files?.length || 0, fileTypes: result.files?.map((f) => f.mediaType) || [], hasText: !!result.text, }) return NextResponse.json({ error: "No image was generated" }, { status: 500 }) } // Convert the first image to base64 data URL const generatedImage = imageFiles[0] const base64Image = `data:${generatedImage.mediaType};base64,${generatedImage.base64}` console.log(`[v0] [${requestId}] Successful response prepared:`, { imageMediaType: generatedImage.mediaType, base64Length: generatedImage.base64?.length || 0, dataUrlLength: base64Image.length, estimatedImageSize: `${((base64Image.length * 0.75) / 1024).toFixed(2)} KB`, hasResponseText: !!result.text, totalProcessingTime: `${(endTime - startTime).toFixed(2)}ms`, timestamp: new Date().toISOString(), }) return NextResponse.json({ imageUrl: base64Image, text: result.text, usage: result.usage, }) } catch (error) { console.error(`[v0] [${requestId}] Generation error:`, { errorType: error instanceof Error ? error.constructor.name : typeof error, errorMessage: error instanceof Error ? error.message : String(error), stack: error instanceof Error ? error.stack : undefined, timestamp: new Date().toISOString(), }) return NextResponse.json( { error: "Failed to generate image", details: error instanceof Error ? error.message : String(error), }, { status: 500 }, ) } } [V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" "use client" import type React from "react" import { useState, useRef } from "react" import { Button } from "@/components/ui/button" import { Textarea } from "@/components/ui/textarea" import { Upload, Wand2, Download, Plus, X } from "lucide-react" export default function AIImagePlayground() { const [image1, setImage1] = useState(null) const [image2, setImage2] = useState(null) const [image1Preview, setImage1Preview] = useState(null) const [image2Preview, setImage2Preview] = useState(null) const [prompt, setPrompt] = useState("") const [generatedImage, setGeneratedImage] = useState(null) const [isGenerating, setIsGenerating] = useState(false) const [error, setError] = useState(null) const fileInput1Ref = useRef(null) const fileInput2Ref = useRef(null) const handleImageUpload = (file: File, imageNumber: 1 | 2) => { console.log(`[v0] Uploading image ${imageNumber}:`, file.name) // Create preview URL const previewUrl = URL.createObjectURL(file) if (imageNumber === 1) { // Clean up previous preview if (image1Preview) { URL.revokeObjectURL(image1Preview) } setImage1(file) setImage1Preview(previewUrl) } else { // Clean up previous preview if (image2Preview) { URL.revokeObjectURL(image2Preview) } setImage2(file) setImage2Preview(previewUrl) } console.log(`[v0] Image ${imageNumber} uploaded successfully`) } const handleFileSelect = (imageNumber: 1 | 2) => { const input = imageNumber === 1 ? fileInput1Ref.current : fileInput2Ref.current if (input) { input.click() } } const handleFileInputChange = (e: React.ChangeEvent, imageNumber: 1 | 2) => { const file = e.target.files?.[0] if (file && file.type.startsWith("image/")) { handleImageUpload(file, imageNumber) } // Reset input e.target.value = "" } const handleDragOver = (e: React.DragEvent) => { e.preventDefault() } const handleDrop = (e: React.DragEvent, imageNumber: 1 | 2) => { e.preventDefault() const file = e.dataTransfer.files[0] if (file && file.type.startsWith("image/")) { handleImageUpload(file, imageNumber) } } const removeImage = (imageNumber: 1 | 2) => { if (imageNumber === 1) { if (image1Preview) { URL.revokeObjectURL(image1Preview) } setImage1(null) setImage1Preview(null) } else { if (image2Preview) { URL.revokeObjectURL(image2Preview) } setImage2(null) setImage2Preview(null) } } const generateImage = async () => { if (!prompt.trim()) { setError("Please enter a prompt") return } setIsGenerating(true) setError(null) setGeneratedImage(null) try { const formData = new FormData() if (image1) { formData.append("image1", image1) } if (image2) { formData.append("image2", image2) } formData.append("prompt", prompt) const response = await fetch("/api/generate-image", { method: "POST", body: formData, }) if (!response.ok) { throw new Error(`API Error: ${response.status}`) } const data = await response.json() setGeneratedImage(data.imageUrl) } catch (err) { setError(err instanceof Error ? err.message : "An error occurred") } finally { setIsGenerating(false) } } const downloadImage = () => { if (generatedImage) { const link = document.createElement("a") link.href = generatedImage link.download = "generated-image.png" document.body.appendChild(link) link.click() document.body.removeChild(link) } } return (

AI Image Generator

Generate images from text or combine existing images

{/* Left Column - Prompt & Controls */}

Input

{/* Image 1 Upload */}

Image 1 (Optional)

handleDrop(e, 1)} onClick={() => handleFileSelect(1)} > {image1Preview ? ( <> Uploaded image 1

) : (

Click or drag image

)}

handleFileInputChange(e, 1)} />

{/* Image 2 Upload */}

Image 2 (Optional)

handleDrop(e, 2)} onClick={() => handleFileSelect(2)} > {image2Preview ? ( <> Uploaded image 2

) : (

Click or drag image

)}

handleFileInputChange(e, 2)} />

{/* Prompt Section */}

Prompt

Describe the image you want to generate or how to combine uploaded images

setPrompt(e.target.value)}
                rows={4}
                className="border-gray-300 font-mono text-sm resize-none focus:border-black flex-1"
              />
            </div>

{/* Generate Button */}
            <Button
              onClick={generateImage}
              disabled={!prompt.trim() || isGenerating}
              className="w-full bg-black text-white hover:bg-gray-800 font-mono text-sm h-12"
            >
              {isGenerating ? (
                <>
                  <div className="animate-spin h-4 w-4 border-2 border-white border-t-transparent mr-2" />
                  Generating...
                </>
              ) : (
                <>
                  <Wand2 className="w-4 h-4 mr-2" />
                  Generate Image
                </>
              )}
            </Button>

{/* Error Display */}
            {error && (
              <div className="p-3 border border-red-600 bg-red-50">
                <p className="text-sm font-mono text-red-700">{error}</p>
              </div>
            )}
          </div>

{/* Right Column - Result */}
          <div className="border border-black bg-white p-6 flex flex-col">
            <div className="flex items-center justify-between mb-6">
              <h2 className="text-lg font-mono font-medium text-black">Result</h2>
              {generatedImage && (
                <Button
                  onClick={downloadImage}
                  variant="outline"
                  size="sm"
                  className="border-black text-black hover:bg-black hover:text-white font-mono text-xs bg-transparent"
                >
                  <Download className="w-4 h-4 mr-1" />
                  Download
                </Button>
              )}
            </div>

<div className="flex-1 flex items-center justify-center min-h-[500px]">
              {generatedImage ? (
                <div className="w-full h-full border border-gray-300 p-4 flex items-center justify-center">
                  <img
                    src={generatedImage || "/placeholder.svg"}
                    alt="Generated image"
                    className="max-w-full max-h-full object-contain"
                  />
                </div>
              ) : (
                <div className="w-full h-full border border-gray-300 flex items-center justify-center">
                  <div className="text-center space-y-4">
                    <div className="w-16 h-16 mx-auto border border-gray-400 flex items-center justify-center">
                      <Plus className="w-8 h-8 text-gray-400" />
                    </div>
                    <p className="text-sm font-mono text-gray-500">Generated image will appear here</p>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}</article></body></html>

About

Tags

Share

About

Tags

Share

More from estebansuarez

More Templates Like This

About

Tags

Share

About

Tags

Share

More from estebansuarez

More Templates Like This